<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* canvas{
      background-color: black;
    } */
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

</body>
</html>
<script>
  /** @type {HTMLCanvasElement} */
  var canvas=document.querySelector("#canvas")
  var ctx=canvas.getContext("2d")
  canvas.width=window.innerWidth
  canvas.height=window.innerHeight
  //生成流星
      // ctx.beginPath()
      // ctx.save()
      // ctx.fillStyle="red"
      // // ctx.arc(this.x,this.y,this.radius,0,Math.PI*2)
      // ctx.arc(canvas.width,200,10,0,Math.PI*2)
      // ctx.fill()
      // ctx.closePath()
      // ctx.restore()
  function Liuxing(x,y,radius,color,vx,vy){
    this.x=x
    this.dx=x
    this.color=color
    this.y=y
    this.dy=y
    this.radius=radius
    this.vx=vx
    this.vy=vy
    this.draw=function(){

      ctx.beginPath()
      ctx.save()
      ctx.fillStyle=this.color
      ctx.arc(this.x,this.y,this.radius,0,Math.PI*2)
      // ctx.arc(canvas.width,200,10,0,Math.PI*2)
      ctx.fill()
      ctx.closePath()
      ctx.restore()
      this.update()
    }
    this.update=function(){
      console.log(this.x);
      this.x-=this.vx
      this.y+=this.vy
      if(this.x<0||this.y>canvas.height){
        // this.x=canvas.width
        // this.y=Math.floor(Math.random() * canvas.width-1)
        // this.x=Math.floor(Math.random() * (canvas.width-canvas.width+301)) + canvas.width-300
        // this.y=0
        this.x=this.dx
        this.y=this.dy
      }
    }
  }
  var balls=[]
  Ball()
  function Ball(){
    balls=[]
  for(var i=0;i<200;i++){
    if(i<150){
    var x=canvas.width+Math.random()*800
    var y=Math.floor(Math.random() * canvas.width-1)
    }
    else{
      // Math.floor(Math.random() * (m - n + 1)) + n;
    // var y=Math.floor(Math.random() * canvas.height-1)
    var x=Math.floor(Math.random() * (canvas.width-canvas.width+501)) + canvas.width-500+200
    var y=Math.random()*100-100
    }
    // Math.random() * 2 + 1;
    var radius=Math.random()*2+1
    var vx=Math.random()*2+2
    var vy=Math.random()*2+0.5
    let r=Math.floor(Math.random() * 256)
    let g=Math.floor(Math.random() * 256)
    let b=Math.floor(Math.random() * 256)
    let rgb="rgb("+r+","+g+","+b+")"
    if(vx<0.2||vy<0.2){
      vx=0.5
    }
    balls.push(new Liuxing(x,y,radius,rgb,vx,vy))
    // return balls
  }
  qou()
  }
  
  function qou(){
    // ctx.clearRect(0,0,canvas.width,canvas.height)
    for(var j=0;j<balls.length;j++){
      balls[j].draw()
    }
    ctx.beginPath()
    ctx.save()
    ctx.fillStyle="rgba(0,0,0,.1)"
    ctx.fillRect(0,0,canvas.width,canvas.height)
    ctx.closePath()
    ctx.restore()
    // console.log("111");
    requestAnimationFrame(qou)
  }
  
</script>